import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import styles from './index.module.less';

const TestView = (props) => {
  const { className, children,kkStyle } = props;

  const [count, setCount] = useState(0);
  const [showDrop, setShowDrop] = useState(false);

  return (
    <div className={classnames(styles.root, className)}>
      {children}
      <button
        type="button"
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {`setCount: ${count}`}
      </button>
      <button
        type="button"
        onClick={() => {
          setShowDrop(!showDrop);
        }}
      >
        {`showDrop: ${showDrop}`}
      </button>
      <div style={{width:200,background:'red',...kkStyle}}>123</div>
      {showDrop?<div className={styles.drop}>????</div>:null}
    </div>
  );
};

TestView.defaultProps = {
  className: null,
  children: null,
  kkStyle:null,
};

TestView.propTypes = {
  className: PropTypes.any,
  children: PropTypes.any,
  kkStyle:PropTypes.any,
};

export default TestView;
